<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>WSO2 Mashup Server-Google Maps Journey Planner</title>
		<script src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE" type="text/javascript"></script>
		<script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
		<script type='text/javascript' src='js/jquery-ui-1.7.2.custom.min.js'></script>
		<script type="text/javascript" src="js/jquery.watermarkinput.js"></script>
		<script type="text/javascript" charset="utf-8">
			google.load("maps", "2.x");
		</script>
		<script type="text/javascript" src="js/main.js"></script>
		<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css"/>
		<link rel="stylesheet" type="text/css" href="css/styles.css"/>
	</head>
	<body id="body" onload="initialize(mapCenter, mapZoom)">
		<div id="mainContainer">
			<div id="columnLeft" class="column">
				<div id="headerLeft" class="header"></div>
				<div id="mainLeft" class="main">
					<div id="accordionLeft" class="accordion">
						<h3 class="titleAccordion"><a href="#">Locate</a></h3>
						<div class="container">
							<div id="locateLeft"><p>Mauris mauris ante.</p></div>
						</div>
						<h3 class="titleAccordion"><a href="#">Journey</a></h3>
						<div id="journeyLeft" class="container overflowVisible">
								<div class="titleAccordionWindow">Plan your Journey</div>
								<ul class="sortable">
									<li class="iconBar">
										<div id="wp0">
											<input type="text" class="directionIn"/>
											<div class="addressFormat"><img class="addressFormatImage" src="images/numeric/black01.png"/></div>
											<div class="locationMarker"><img class="locationMarkerImage" src="images/numeric/black01.png"/></div>
										</div>
									</li>
									<li class="iconBar">
										<div id="wp1">
											<input type="text" class="directionIn"/>
											<div class="addressFormat"><img class="addressFormatImage" src="images/numeric/black01.png"/></div>
											<div class="locationMarker"><img class="locationMarkerImage" src="images/numeric/black02.png"/></div>
										</div>
									</li>
								</ul>
								<div class="toolbarAccordion">
                                    <div id="findRoute"><img class="toolbarAccordionImage" src="images/icons/car.png"/></div>
                                </div>
						</div>
						<h3 class="titleAccordion"><a href="#">Places</a></h3>
						<div id="wayPointsLeft" class="container">
						    <div id="searchWayPoint">
                                <input id="searchBoxWayPoint" type="text"/>
                            </div>
							<div id="wayPointsRangeContainer">
								<div id="wayPointsRangeText">Distance Range : <input type="text" id="wayPointsRangeValue"/></div>
								<div id="wayPointsRangeSelector"></div>
							</div>
                            <ul class="sortable">
                                <li class="iconBar">
                                    <div class="apartments">
										<div class="configurationPanel">
		                                    <div class="wayPointIcon"><img class="wayPointIconImage" src="images/icons/apartment.png"/></div>
		                                    <div class="wayPointIconDescrip">Apartments</div>
		                                    <div class="wayPointInsert"><img class="wayPointInsertImage" src="images/icons/right.png"/></div>
											<div class="toolsPanelToggle"><div class="toggleButton"></div></div>
										</div>
										<div class="toolsPanel"></div>
                                    </div>
                                </li>
                                <li class="iconBar">
                                    <div class="hospitals">
										<div class="configurationPanel">
		                                    <div class="wayPointIcon"><img class="wayPointIconImage" src="images/icons/hospital.png"/></div>
		                                    <div class="wayPointIconDescrip">Hospitals</div>
		                                    <div class="wayPointInsert"><img class="wayPointInsertImage" src="images/icons/right.png"/></div>
											<div class="toolsPanelToggle"><div class="toggleButton"></div></div>
										</div>
										<div class="toolsPanel"></div>
                                    </div>
                                </li>
                                <li class="iconBar">
                                    <div class="schools">
										<div class="configurationPanel">
		                                    <div class="wayPointIcon"><img class="wayPointIconImage" src="images/icons/school.png"/></div>
		                                    <div class="wayPointIconDescrip">Schools</div>
		                                    <div class="wayPointInsert"><img class="wayPointInsertImage" src="images/icons/right.png"/></div>
											<div class="toolsPanelToggle"><div class="toggleButton"></div></div>
										</div>
										<div class="toolsPanel"></div>
                                    </div>
                                </li>
                                <li class="iconBar">
                                    <div class="wineyards">
										<div class="configurationPanel">
		                                    <div class="wayPointIcon"><img class="wayPointIconImage" src="images/icons/wineyard.png"/></div>
		                                    <div class="wayPointIconDescrip">Wineyard</div>
		                                    <div class="wayPointInsert"><img class="wayPointInsertImage" src="images/icons/right.png"/></div>
											<div class="toolsPanelToggle"><div class="toggleButton"></div></div>
										</div>
										<div class="toolsPanel"></div>
                                    </div>
                                </li>
                            </ul>
						</div>
					</div>
				</div>
			</div>
			<div id="columnMiddle" class="column">
				<div id="headerMiddle" class="header"></div>
				<div id="mainMiddle" class="main">
					<div id="streetviewContainer"></div>
					<div id="mapContainer"></div>
				</div>
			</div>
			<div id="columnRight" class="column">
				<div id="headerRight" class="header"></div>
				<div id="mainRight" class="main">
					<div id="accordionRight" class="accordion">
						<h3 class="titleAccordion"><a href="#">Locate</a></h3>
						<div id="locateRight" class="container">
						</div>
						<h3 class="titleAccordion"><a href="#">Journey</a></h3>
						<div id="journeyRight" class="container">
						</div>
						<h3 class="titleAccordion"><a href="#">Places</a></h3>
						<div id="wayPointsRight" class="container">
							<ul class="sortable">
                                <li class="iconBar">
                                    <div class="apartments">
										<div class="configurationPanel">
		                                    <div class="wayPointIcon"><img class="wayPointIconImage" src="images/icons/apartment.png"/></div>
		                                    <div class="wayPointIconDescrip">Apartments</div>
		                                    <div class="wayPointRemove"><img class="wayPointRemoveImage" src="images/icons/right.png"/></div>
											<div class="toolsPanelToggle"><div class="toggleButton"></div></div>
										</div>
										<div class="toolsPanel">
											<div class="iWayPointsRangeContainer">
												<div class="iWayPointsRangeText">Distance Range : <input type="text" class="iWayPointsRangeValue"/></div>
												<div class="iWayPointsRangeSelector"></div>
											</div>
										</div>
                                    </div>
                                </li>
                                <li class="iconBar">
                                    <div class="hospitals">
										<div class="configurationPanel">
		                                    <div class="wayPointIcon"><img class="wayPointIconImage" src="images/icons/hospital.png"/></div>
		                                    <div class="wayPointIconDescrip">Hospitals</div>
		                                    <div class="wayPointRemove"><img class="wayPointRemoveImage" src="images/icons/right.png"/></div>
											<div class="toolsPanelToggle"><div class="toggleButton"></div></div>
										</div>
										<div class="toolsPanel">
											<div class="iWayPointsRangeContainer">
												<div class="iWayPointsRangeText">Distance Range : <input type="text" class="iWayPointsRangeValue"/></div>
												<div class="iWayPointsRangeSelector"></div>
											</div>
										</div>
                                    </div>
                                </li>
                                <li class="iconBar">
                                    <div class="schools">
										<div class="configurationPanel">
		                                    <div class="wayPointIcon"><img class="wayPointIconImage" src="images/icons/school.png"/></div>
		                                    <div class="wayPointIconDescrip">Schools</div>
		                                    <div class="wayPointRemove"><img class="wayPointRemoveImage" src="images/icons/right.png"/></div>
											<div class="toolsPanelToggle"><div class="toggleButton"></div></div>
										</div>
										<div class="toolsPanel">
											<div class="iWayPointsRangeContainer">
												<div class="iWayPointsRangeText">Distance Range : <input type="text" class="iWayPointsRangeValue"/></div>
												<div class="iWayPointsRangeSelector"></div>
											</div>
										</div>
                                    </div>
                                </li>
                                <li class="iconBar">
                                    <div class="wineyards">
										<div class="configurationPanel">
		                                    <div class="wayPointIcon"><img class="wayPointIconImage" src="images/icons/wineyard.png"/></div>
		                                    <div class="wayPointIconDescrip">Wineyard</div>
		                                    <div class="wayPointRemove"><img class="wayPointRemoveImage" src="images/icons/right.png"/></div>
											<div class="toolsPanelToggle"><div class="toggleButton"></div></div>
										</div>
										<div class="toolsPanel">
											<div class="iWayPointsRangeContainer">
												<div class="iWayPointsRangeText">Distance Range : <input type="text" class="iWayPointsRangeValue"/></div>
												<div class="iWayPointsRangeSelector"></div>
											</div>
										</div>
                                    </div>
                                </li>
                            </ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
